<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <title>酷鲨商城后台管理系统</title>
  <style>
    /* 设置body样式 */
    body {
      margin: 0;
    }

    /* 设置头部样式 */
    .el-header {
      background-color: #0096dc;
      line-height: 60px;
    }

    .el-header h1 {
      margin: 0;
      font-size: 22px;
      color: #fff;
    }

    .el-header h1 small, .el-header h1 small a {
      font-size: 15px;
      float: right;
      color: #fff;
      text-decoration: none;
    }

    /* 设置侧栏样式 */
    .el-aside {
      background-color: #545c64;
    }

    /* 表单样式 */
    .el-form{
      width: 66%;
    }
    .el-breadcrumb{
      margin-bottom: 20px;
    }

  </style>
</head>
<body>
<div id="app">
  <el-container>
    <!-- 头部开始 -->
    <el-header>
      <h1>
        酷鲨商城后台管理系统
        <small>
          <span v-if="username">{{username}}</span>
          <a v-if="username" href="" @click="logout"><i class="el-icon-switch-button"></i></a>
          <a v-else href="login.html">登录</a>
        </small>
      </h1>
    </el-header>
    <!-- 头部结束 -->
    <!-- 内容开始 -->
    <el-container>
      <!-- 侧栏开始 -->
      <el-aside width="200px">
        <!--侧栏开始-->
        <el-menu @select="handleMemuSelect"
                 background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 :default-active="activeMenuIndex">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-receiving"></i>
              <span>分类管理</span>
            </template>
            <el-menu-item index="1-1"><i class="el-icon-notebook-2"></i> 分类列表</el-menu-item>
            <el-menu-item index="1-2"><i class="el-icon-circle-plus-outline"></i> 添加分类</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-picture"></i>
              <span>轮播图</span>
            </template>
            <el-menu-item index="2-1"><i class="el-icon-notebook-2"></i> 轮播图列表</el-menu-item>
            <el-menu-item index="2-2"><i class="el-icon-circle-plus-outline"></i> 添加轮播图</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-goods"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item index="3-1"><i class="el-icon-notebook-2"></i> 商品列表</el-menu-item>
            <el-menu-item index="3-2"><i class="el-icon-circle-plus-outline"></i> 添加商品</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-news"></i>
              <span>新闻管理</span>
            </template>
            <el-menu-item index="4-1"><i class="el-icon-notebook-2"></i> 新闻列表</el-menu-item>
            <el-menu-item index="4-2"><i class="el-icon-circle-plus-outline"></i> 添加新闻</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!--侧栏结束-->
      <el-main>
        <div v-if="activeMenuIndex=='1-1'">
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>分类管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类列表</el-breadcrumb-item>
          </el-breadcrumb>

        </div>
        <div v-if="activeMenuIndex=='1-2'">
          <!-- 添加分类表单-->
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>分类管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加分类</el-breadcrumb-item>
          </el-breadcrumb>

        </div>
        <div v-if="activeMenuIndex=='1-3'">
          <!-- 修改分类 -->
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>分类管理</el-breadcrumb-item>
            <el-breadcrumb-item>修改分类</el-breadcrumb-item>
          </el-breadcrumb>

        </div>
        <div v-if="activeMenuIndex=='2-1'">
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>轮播图管理</el-breadcrumb-item>
            <el-breadcrumb-item>轮播图列表</el-breadcrumb-item>
          </el-breadcrumb>

        </div>
        <!-- 添加轮播图 -->
        <div v-if="activeMenuIndex=='2-2'">
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>轮播图管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加轮播图</el-breadcrumb-item>
          </el-breadcrumb>

        </div>
        <!-- 修改轮播图 -->
        <div v-if="activeMenuIndex=='2-3'">
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>轮播图管理</el-breadcrumb-item>
            <el-breadcrumb-item>修改轮播图</el-breadcrumb-item>
          </el-breadcrumb>

        </div>
        <!-- 商品列表 -->
        <div v-if="activeMenuIndex=='3-1'">
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
          </el-breadcrumb>

        </div>
        <!-- 添加商品 -->
        <div v-if="activeMenuIndex=='3-2'">
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加商品</el-breadcrumb-item>
          </el-breadcrumb>

        </div>
        <!-- 修改商品 -->
        <div v-if="activeMenuIndex=='3-3'">
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>修改商品</el-breadcrumb-item>
          </el-breadcrumb>

        </div>
        <!-- 商品管理结束 -->
        <!-- 新闻列表开始 -->
        <div v-if="activeMenuIndex=='4-1'">
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>新闻管理</el-breadcrumb-item>
            <el-breadcrumb-item>新闻列表</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 添加新闻 -->
        <div v-if="activeMenuIndex=='4-2'">
          <!-- 面包屑 导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>新闻管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加新闻</el-breadcrumb-item>
          </el-breadcrumb>

        </div>
      </el-main>
    </el-container>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!-- 引入axios -->
<script src="https://cdn.staticfile.org/axios/0.21.4/axios.min.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: function () {
      return {
        // 当前登录的用户名
        username: "",
        // 当前激活的菜单项
        activeMenuIndex: "1-1",
        // 正在编辑的分类
        category: {
          id: 0,
          name: "",
          display: true,
          orderNum: 0
        },
        // 正在编辑的轮播图
        banner: {
          id: 0,
          image: "",
          orderNum: 0
        },
        // 正在编辑的商品
        product: {
          id: 0,
          title: "",
          discount: 0,
          price: 0,
          sales: 0,
          image: ""
        },
        // 分类列表
        categories: [
          {id: 1, name: '精彩活动', orderNum:1, display: true},
          {id: 2, name: '精品女装', orderNum:2, display: true},
          {id: 3, name: '品牌男装', orderNum:3, display: true},
          {id: 4, name: '母婴产品', orderNum:4, display: true},
          {id: 5, name: '医药健康', orderNum:5, display: true},
          {id: 6, name: '数码科技', orderNum:6, display: true}],
        // 轮播图列表
        banners: [
          {id: 1, image: 'imgs/b1.jpg', orderNum: 1},
          {id: 2, image: 'imgs/b2.jpg', orderNum: 2},
          {id: 3, image: 'imgs/b3.jpg', orderNum: 3}],
        // 商品列表
        products: [
          {id:2, title: '森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古', discount: 233, price: 598, image: 'imgs/a.jpg', sales: 2342},
          {id:3, title: '茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装', discount: 233, price: 598, image: 'imgs/b.jpg', sales: 2342},
          {id:4, title: '雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins', discount: 233, price: 598, image: 'imgs/c.jpg', sales: 2342},
          {id:5, title: '【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬', discount: 233, price: 598, image: 'imgs/d.jpg', sales: 2342},
          {id:6, title: 'BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins', discount: 233, price: 598, image: 'imgs/e.jpg', sales: 2342},
          {id:6, title: '香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领紫色呢子大衣', discount: 233, price: 598, image: 'imgs/f.jpg', sales: 2342},
          {id:7, title: 'SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦', discount: 233, price: 598, image: 'imgs/g.jpg', sales: 2342},
          {id:9, title: '美特斯邦威女MTEE 贺岁系列中长款风衣736598', discount: 233, price: 598, image: 'imgs/h.jpg', sales: 2342},
          {id:10, title: 'imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套', discount: 233, price: 598, image: 'imgs/i.jpg', sales: 2342},
          {id:11, title: 'BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣', discount: 233, price: 598, image: 'imgs/j.jpg', sales: 2342},
          {id:12, title: '憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外', discount: 233, price: 598, image: 'imgs/k.jpg', sales: 2342},
          {id:13, title: '美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔', discount: 233, price: 598, image: 'imgs/a.jpg', sales: 2342}]
      }
    },
    methods: {
      // 处理导航菜单选择事件
      handleMemuSelect(key, keyPath) {
        this.activeMenuIndex = key;
      }
    },
    mounted() {
    }
  })
</script>
</html>